import React from "react"
import { Tabs, WhiteSpace,Badge } from 'antd-mobile';
import { BrowserRouter as Router, Route, Link,Switch,Redirect } from 'react-router-dom'
import Home from "./Home"
import Singer from "./Singer";
import SongList from "./SongList";
import Search from "./Search";
import RankList from "./RankList";
import Mv from "./MV"
import MvResult from "./MV/mvResult"

import Page404 from "./page404";
import Song from "./Song"
import "../assets/styles/app1.css"

class App1 extends React.Component{
    render(){
        return (
            <div>
                    <Router>

                    {/* //Route专门用于匹配路由组件 */}
                    <div className="ge">
                            <p><Link to="/home">首页</Link></p>
                            <p><Link to="/songlist">歌单</Link></p>
                            <p><Link to="/singer">歌手</Link></p>
                            <p><Link to="/ranklist">排行榜</Link></p>
                            <p><Link to="/mv">MV</Link></p>
                            <p><Link to="/search">搜素</Link></p>
                        </div>
                        {/* switch 排他性路由，里面的路由都会严格匹配 */}
                        <Switch>
                            {/*            exact作用 严格匹配 */}
                            {/* <Route  /> */}
                            <Route path="/home"   component={Home}/>
                            <Route path="/songlist"  component={SongList}/>
                            <Route path="/singer"  component={Singer}/>
                            <Route path="/ranklist"  component={RankList}/>
<<<<<<< HEAD

                            {/* <Route path="/search"  component={Search}/> */}
                            {/* <Route path="/ranklist"  component={RankList}/> */}
                            
                            <Route path="/news" component={Search} />

=======
>>>>>>> 3ef2a7301991405f246e5687924fdd0e40607de4
                            <Route path="/mv"  component={Mv}/>
                            <Route path="/search"  component={Search}/>
                            <Route path="/ranklist"  component={RankList}/>
                            <Route path="/mvresult"  component={MvResult}/>
                        
                            {/* <Route component={Page404} /> */}
                            {/* 路由的重定向 */}
                            {/* <Redirect from="/"  to="/home" /> */}
                            {/* 一般重定向都放在最后面，不放在最后面可能会导致死循环 */}
                        </Switch>
                        <Switch>
                            <Route path="/newSong"  component={RankList}/>
                            <Route path="/song" component={Song}/>
                        </Switch>
            {/* <Normal /> */}
          
    </Router>
            </div>
        )
    }
}
export default App1